<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport"
    content="width=device-width,initial-scale=1,user-scalable=0,minimum-scale=1.0,maximum-scale=1.0" />
  <meta name="author" content="火星科技 http://mars2d.cn " />
  <meta name="apple-touch-fullscreen" content="yes" />
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black" />
  <meta name="format-detection" content="telephone=no" />
  <meta name="x5-fullscreen" content="true" />
  <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
  <!-- 标题及搜索关键字 -->
  <meta name="keywords" content="火星科技,cesium,3D,GIS,marsgis,二维,地图,地球,开发,框架,系统,示例,资料,模型,离线,外包,合肥,安徽,中国" />
  <meta name="description"
    content="火星科技 合肥火星 合肥火星科技 合肥火星科技有限公司 leaflet leaflet框架 leaflet开发 cesium cesium开发 cesium框架 二维 地图 模型  gis marsgis 地图离线 地图开发 地图框架 地图外包 框架 开发 外包  地图离线 二维地图 二维地图 全景漫游 地理信息系统 云GIS 二维GIS GIS平台 WebGIS" />

  <link rel="shortcut icon" type="image/x-icon" href="//mars2d.cn/favicon.ico" />
  <title>坐标拾取和转换 | Mars2D | 地理信息平台 | 火星科技 | 合肥火星科技有限公司</title>

  <!--第三方lib-->
  <script type="text/javascript" src="../lib/include-lib.js" libpath="../lib/"
    include="jquery,font-awesome,bootstrap,bootstrap-checkbox,layer,haoutil,turf,mars2d"></script>

  <link href="css/style.css" rel="stylesheet" />
</head>

<body class="dark">
  <div id="mars2dContainer" class="mars2d-container"></div>
  <div class="infoview">
    <div>
      <!-- radio 按钮 -->
      <div>
        <span>范围：</span>
        <div class="radio radio-info radio-inline">
          <input type="radio" id="rdoType1" name="rdoType" value="1" checked />
          <label for="rdoType1">十进制</label>
        </div>
        <div class="radio radio-info radio-inline">
          <input type="radio" id="rdoType2" name="rdoType" value="2" />
          <label for="rdoType2">度分秒</label>
        </div>
        <div class="radio radio-info radio-inline" title="2000平面坐标">
          <input type="radio" id="rdoType3" name="rdoType" value="3" />
          <label for="rdoType3">平面坐标</label>
        </div>
      </div>

      <!--十进制 经纬度坐标 高程 表单 -->
      <form id="decimalSystemForm" class="form-horizontal" autocomplete="off">
        <div class="viewTen">
          <div title="请输入-180至180之间的数字">
            <label>经度：</label>
            <input type="text" id="txtLngTen" step="0.000001" onchange="changeTen()" />
          </div>
          <div title="请输入-90至90之间的数字">
            <label>纬度：</label>
            <input type="text" id="txtLatTen" step="0.000001" onchange="changeTen()" />
          </div>

        </div>
      </form>

      <!-- 度分秒 经纬度 高程表单 -->
      <form id="coordinateForm" autocomplete="off">
        <div class="viewDms" style="display: none">
          <div>
            <label>经度：</label>
            <input type="text" style="width: 80px" id="txtLngDegree" onchange="changeDfm()" /><label>&nbsp;° </label>
            <input type="text" style="width: 80px" id="txtLngMinute" onchange="changeDfm()" /><label>&nbsp;′ </label>
            <input type="text" style="width: 80px" id="txtLngSecond" onchange="changeDfm()" /><label>&nbsp;″ </label>
          </div>
          <div>
            <label>纬度：</label>
            <input type="text" style="width: 80px" id="txtLatDegree" onchange="changeDfm()" /><label>&nbsp;° </label>
            <input type="text" style="width: 80px" id="txtLatMinute" onchange="changeDfm()" /><label>&nbsp;′ </label>
            <input type="text" style="width: 80px" id="txtLatSecond" onchange="changeDfm()" /><label>&nbsp;″ </label>
          </div>

        </div>
      </form>

      <!-- 2000平面坐标 表单-->
      <form class="planeForm" autocomplete="off">
        <div class="viewGk" style="display: none">
          <div>
            <span>分带：</span>
            <div class="radio radio-info radio-inline">
              <input type="radio" id="rdoGkType1" name="rdoGkType" value="1" checked />
              <label for="rdoGkType1">三度带</label>
            </div>
            <div class="radio radio-info radio-inline">
              <input type="radio" id="rdoGkType2" name="rdoGkType" value="2" checked />
              <label for="rdoGkType2">六度带</label>
            </div>
          </div>

          <div class="viewGk3" style="display: none">
            <div>
              <label>纵坐标：</label>
              <input type="text" id="txtGk3X" onchange="change3GKZone()" />
            </div>
            <div>
              <label>横坐标：</label>
              <input type="text" id="txtGk3Y" onchange="change3GKZone()" />
            </div>

          </div>

          <div class="viewGk6">
            <div>
              <label>纵坐标：</label>
              <input type="text" id="txtGk6X" onchange="change6GKZone()" />
            </div>
            <div>
              <label>横坐标：</label>
              <input type="text" id="txtGk6Y" onchange="change6GKZone()" />
            </div>

          </div>
        </div>
      </form>
    </div>
    <!-- "坐标定位" button按钮 -->
    <div style="text-align: center">
      <input type="button" class="btn btn-primary" value="图上拾取" onclick="bindMourseClick()" />
      <input type="button" class="btn btn-primary" value="坐标定位" onclick="submitCenter()" />
    </div>
  </div>

  <!--业务代码-->
  <script src="./js/common.js"></script>
  <script>
    "use script"; //开发环境建议开启严格模式

    var map;
    //全局中间变量
    let currJD;
    let currWD;

    function initMap(options) {
      //合并属性参数，可覆盖config.json中的对应配置
      var mapOptions = mars2d.Util.merge(options, {
        zoom: 13,
        center: { lng: 117.238884, lat: 31.84417 }
      });

      //创建地图
      map = new mars2d.Map("mars2dContainer", mapOptions);

      //默认显示地图中心点坐标
      var point = map.getCenter();
      point.format();
      currJD = point.lng;
      currWD = point.lat;
      updateTen();

      $('input:radio[name="rdoType"]').change(function () {
        var selectType = $(this).val();

        switch (selectType) {
          default:
            //十进制
            $(".viewTen").show();
            $(".viewDms").hide();
            $(".viewGk").hide();
            updateTen();
            break;
          case "2": //度分秒
            $(".viewDms").show();
            $(".viewTen").hide();
            $(".viewGk").hide();
            updataDfm();
            break;
          case "3": //CGCS2000
            $(".viewTen").hide();
            $(".viewDms").hide();
            $(".viewGk").show();
            updata3GKZone();
            updata6GKZone();
            break;
        }
      });

      $('input:radio[name="rdoGkType"]').change(function () {
        var selectType2 = $(this).val();
        switch (selectType2) {
          default:
            $(".viewGk3").show();
            $(".viewGk6").hide();
            updata3GKZone();
            break;
          case "2": //当前视角范围
            $(".viewGk3").hide();
            $(".viewGk6").show();
            updata6GKZone();
            break;
        }
      });
    }

    //修改了：十进制
    function changeTen() {
      currJD = Number($("#txtLngTen").val() || 0); //获取经度
      currWD = Number($("#txtLatTen").val() || 0); //获取纬度
    }
    //更新：十进制
    function updateTen() {
      $("#txtLngTen").val(mars2d.Util.formatNum(currJD, 6));
      $("#txtLatTen").val(mars2d.Util.formatNum(currWD, 6));

    }

    //修改了：度分秒
    function changeDfm() {
      let jd_du = Number($("#txtLngDegree").val() || 0); //获取
      let jd_fen = Number($("#txtLngMinute").val() || 0);
      let jd_miao = Number($("#txtLngSecond").val() || 0);
      currJD = mars2d.PointTrans.dms2degree(jd_du, jd_fen, jd_miao);

      let wd_du = Number($("#txtLatDegree").val() || 0); //获取
      let wd_fen = Number($("#txtLatMinute").val() || 0);
      let wd_miao = Number($("#txtLatSecond").val() || 0);
      currWD = mars2d.PointTrans.dms2degree(wd_du, wd_fen, wd_miao);

    }
    //更新：度分秒
    function updataDfm() {
      let tenJD = mars2d.PointTrans.degree2dms(currJD);
      $("#txtLngDegree").val(tenJD.degree);
      $("#txtLngMinute").val(tenJD.minute);
      $("#txtLngSecond").val(tenJD.second);

      let tenWD = mars2d.PointTrans.degree2dms(currWD);
      $("#txtLatDegree").val(tenWD.degree);
      $("#txtLatMinute").val(tenWD.minute);
      $("#txtLatSecond").val(tenWD.second);

    }

    //修改了：2000平面坐标三分度
    function change3GKZone() {
      let jd = Number($("#txtGk3X").val()); //获取
      let wd = Number($("#txtGk3Y").val());

      var gk3 = mars2d.PointTrans.proj4Trans([jd, wd], mars2d.CRS.CGCS2000_GK_Zone_3, mars2d.CRS.EPSG4326);
      currJD = gk3[0];
      currWD = gk3[1];

    }
    //更新：2000平面坐标三分度
    function updata3GKZone() {
      var zone3 = mars2d.PointTrans.proj4Trans([currJD, currWD], mars2d.CRS.EPSG4326, mars2d.CRS.CGCS2000_GK_Zone_3); //十进制转2000平面三分度
      $("#txtGk3X").val(mars2d.Util.formatNum(zone3[0], 1));
      $("#txtGk3Y").val(mars2d.Util.formatNum(zone3[1], 1));
    }

    //修改了：2000平面坐标六分度
    function change6GKZone() {
      let jd = Number($("#txtGk6X").val()); //获取
      let wd = Number($("#txtGk6Y").val());
      var gk6 = mars2d.PointTrans.proj4Trans([jd, wd], mars2d.CRS.CGCS2000_GK_Zone_6, mars2d.CRS.EPSG4326);

      currJD = gk6[0];
      currWD = gk6[1];

    }
    //更新：2000平面坐标六分度
    function updata6GKZone() {
      var zoon6 = mars2d.PointTrans.proj4Trans([currJD, currWD], mars2d.CRS.EPSG4326, mars2d.CRS.CGCS2000_GK_Zone_6); //十进制转2000平面六分度
      $("#txtGk6X").val(mars2d.Util.formatNum(zoon6[0], 1));
      $("#txtGk6Y").val(mars2d.Util.formatNum(zoon6[1], 1));
    }

    //图上拾取
    function bindMourseClick() {
      // map.setCursor(true);
      map.once(mars2d.EventType.click, function (event) {
        let coordinate = event.latlng; //经纬度坐标
        currJD = coordinate.lng;
        currWD = coordinate.lat;

        //更新面板
        let selectType = $('input:radio[name="rdoType"]:checked').val();
        switch (selectType) {
          default:
            //十进制
            updateTen();
            break;
          case "2": //度分秒
            updataDfm();
            break;
          case "3": //CGCS2000
            let selectType2 = $('input:radio[name="rdoGkType"]:checked').val();
            if (selectType2 == "2") {
              updata6GKZone();
            } else {
              updata3GKZone();
            }
            break;
        }
        //end
        updateMarker();
      });
    }

    function submitCenter() {
      if (currJD > 180 || currJD < -180) {
        haoutil.alert("请输入有效的经度值！");
        return;
      }
      if (currWD > 90 || currWD < -90) {
        haoutil.alert("请输入有效的纬度值！");
        return;
      }

      updateMarker(true); //更新点
      if (pointEntity) {
        map.flyToGraphic(pointEntity)

      }
    }

    var pointEntity;
    function updateMarker(hasCenter) {
      var latlng = [currWD, currJD];
      if (pointEntity == null) {
        pointEntity = new mars2d.graphic.Marker({
          latlng: latlng,
          style: {
            image: "img/marker/mark1.png",
            width: 32,
            height: 44,
          },
        });
        map.graphicLayer.addGraphic(pointEntity);
      } else {
        pointEntity.latlng = latlng;
      }

    }
  </script>
</body>

</html>
